import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView, Image,Text } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { DNavBar, DCarInfo, DItemError, DModal } from '@/components'
import http from '@/api'
import sdk from '@/common/sdk'
import './mytrack.scss'

const checkbox = require('../assets/check_box.png')
const checked = require('../assets/ischecked.png')
export default class mytrack extends Component {

  constructor(props) {
    super(props)
    this.state = {
      item: {},
      scrollStyle: window.screen.availHeight,
      page: 1,
      limit: 10,
	  title:'我的足迹',
      order: "",
      sidx: "",
      status: "",
      list: [],
      totalPage: 1,
      _status:0,
      footerStatus: false,
      isModal:false,
      modelText:''
    }
  }


  componentWillMount() {
    this.getmyTracks()
  }
  componentDidShow() {
      sdk.setTitleInfo(this.state.title);
    }
  getmyTracks() {
    let { page, limit, order, sidx, status, totalPage, list } = this.state
    let obj = {
      page,
      limit,
      order,
      sidx,
      status
    }
    if (page > totalPage) {
      this.setState({
        footerStatus: true
      })
      return
    }
    http.getmyTracks(obj).then(res => {
      if (!res.list || res.list.length === 0) {
        return
      }
      let { _status } = this.state
      let _item1 = []
      res.list.map(_key => {
        _item1.push({
          ..._key,
          isCheck: _status !== 0 ? _status === 1 ? '2' : '1' : ''      //1选中  2不选中
        })
      })
      this.setState({
        list: [...list, ..._item1],
        totalPage: res.totalPage
      })
    })
  }

  onScroll = () => {
    this.setState({
      page: this.state.page + 1
    }, () => this.getmyTracks())
  }

  handleToDetail(id) {
    Taro.navigateTo({
      url: `/pages/carsourcedetails/carsourcedetails?id=${id}`
    })
  }
  //多选框
  handlecheck(index) {
    let { list } = this.state
    list[index].isCheck = list[index].isCheck === '1' ? '2' : '1'
    this.isSelectAll(list)
    this.setState({
      list
    })
  }
  //是否全部勾选
  isSelectAll(list){
    for (let i = 1; i < list.length; i++) {
      if (list[0].isCheck !== list[i].isCheck) {
        return this.setState({
          _status: 1
        })
      }
      if (list[0].isCheck === '1') {
        this.setState({
          _status: 2
        })
      }

    }
  }
  //管理
  handleMgr(){
    let {list} = this.state
    let _item = []
    list.map(i => {
      _item.push({
        ...i,
        isCheck: '2'
      })
    })
    this.setState({
      list: _item,
      _status: 1,
    })
  }
  //全选
  handleSelAll(){
    let { list } = this.state
    let _item = []
    list.map(i => {
      _item.push({
        ...i,
        isCheck: this.state._status === 1 ? '1' : '2',
      })
    })
    this.setState({
      list: _item,
      _status: this.state._status === 1 ? 2 : 1,
    })
  }
  //删除
  handleDel(){
    let { list, _status } = this.state
    let delList = []
    if (_status === 2) {
      list.map(_item => {
        delList.push(_item.bussId)
      })
    } else {
      list.map(_item => {
        if (_item.isCheck === '1') {
          delList.push(_item.bussId)
        }
      })
    }
    if (delList.length === 0) {
      return Taro.showToast({
        title: '请选择要删除的足迹',
        icon: 'none'
      })
    }
    this.setState({
      isModal: true,
      delList,
      modelText: `确定要删除选中的${delList.length}个足迹吗？`
    })
  }
  
  handleCancel(){
    this.setState({
      isModal:false
    })
  }

  onHandlerConfirm() {
    this.handleCancel()
    let { delList } = this.state
      this.delFootprint(delList)
  }
  delFootprint(params){
    http.delFootprint(params).then(res=>{
      Taro.showToast({
        title: '删除成功',
        duration:1000
      }).then(res=>[
        setTimeout(()=>{
          Taro.redirectTo({
            url:'/pages/mytracks/mytracks'
          })
        },1000)
      ])
    })
  }
  handleFinish(){
    let {list} = this.state
    let _item = []
    list.map(i => {
      _item.push({
        ...i,
        isCheck: ''
      })
    })
    this.setState({
      list: _item,
      _status: 0,
    })
  }
  render() {
    const {
      item,
      isModal,
      modelText,
      scrollStyle,
      footerStatus,
      list,
      _status
    } = this.state
    const itemHtml = () => {
      return <View className='b_mytracks__box'>
        {
          list && list.map((item, i) => {
            return <DCarInfo
              key={i}
              check={item.isCheck}
              handlecheck={this.handlecheck.bind(this, i)}
              carmoney={item.carOfferPrice}
              nameList={[item.carDataModel]}
              infoList={[item.carSourceType, item.carEmissionStd, item.carSourcePt, '外观颜色', item.carOutColor,]}
              place={item.carSourceAddr}
              money={item.carGuiPrice}
              icon={item.carDataBrandLogo}
              company={item.entName + '(' + item.entDis + ')'}
              clock={item.createTime}
              onDetail={this.handleToDetail.bind(this, item.bussId)}
            >
            </DCarInfo>
          })
        }

      </View>
    }
    return (
      <View className='b_mytracks'>

        <DNavBar title={this.state.title} className='b_mytracks_nav'></DNavBar>

        <View className='b_mytracks__box'>
          <View className='b_mytracks__content'>
            <ScrollView
              scrollY
              scrollWithAnimation
              lowerThreshold='20'
              style={`height:${scrollStyle - 50}PX`}
              onScrollToLower={this.onScroll}>
              {itemHtml()}
              {
                footerStatus && <View className='b_mytracks__footer'>暂无更多</View>
              }
            </ScrollView>
          </View>
        </View>
        {_status === 0 && list.length !== 0 &&
              <View className='b_mytracks__footer2'>
                <AtButton className='item_btn' onClick={this.handleMgr.bind(this)}>管理</AtButton>
              </View>
            }
        {_status!== 0 &&
              <View className='b_mytracks__footer3'>
                <View className='b_mytracks__footer3_box'>
                  <Image src={_status === 1 ? checkbox : checked} className='b_mytracks__footer3_img' onClick={this.handleSelAll.bind(this)}></Image>
                  <Text className='b_mytracks__footer3_text' onClick={this.handleSelAll.bind(this)}>全选</Text>
                </View>
                <AtButton className='item_btn item_btn_del' onClick={this.handleDel.bind(this)}>删除</AtButton>
                <AtButton className='item_btn' onClick={this.handleFinish.bind(this)}>完成</AtButton>
              </View>
            }
        {list.length === 0 && <DItemError></DItemError>}  
        <DModal
          isShow={isModal}
          title='提示'
          text={modelText}
          firstbtn='取消'
          lastbtn='确定'
          onCancel={this.handleCancel.bind(this)}
          onFirst={this.handleCancel.bind(this)}
          onLast={this.onHandlerConfirm.bind(this)}
        ></DModal>
      </View>

    )
  }
}
